<template>
  <div class="daily_chart_select_date">
    <!--顶部条件-->
    <div class="flex bg_white top_date">
      <div class="" style="padding:20px;">
        <span style="padding: 20px;cursor: pointer;"
          :class="checkIndex === index ? 'selected' : ''" v-for="(item, index) in topData"
          :key="index" @click="topChooseClick(index)">{{ item }}</span>
      </div>
      <div class="flex flex-vertical-center">
        <span style="word-break: keep-all;max-width: 85px;"> 自定义：</span>
        <DatePicker type="daterange" :clearable="false" @on-change="dataChoose" ref="oselect"
          :options="options" placeholder="请选择时间"></DatePicker>
      </div>
    </div>
  </div>
</template>

<script>
  import dailyApi from '@/biz/buildingHome/home'
  export default {
    data() {
      return {
        topData: ['本周', '本月', '本年'],
        checkIndex: 0,
        options: {
          disabledDate(date) {
            return (
              date &&
              date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
            )
          },
        },
        checkTime: [],
      }
    },
    methods: {
      //选择时间
      topChooseClick(index) {
        this.$refs.oselect && this.$refs.oselect.handleClear() // 清空自定义时间
        let idx = Number(index) + 2
        this.checkIndex = index
        this.checkTime = dailyApi.resovleTime(idx, this.currentDate)
        this.$emit('success', { checkTime: this.checkTime })
      },
      dataChoose(val) {
        console.log(val)
        if (val[0] == '' || val[1] == '') {
          return false
        }
        this.checkIndex = null
        this.checkTime = {
          startTime: val[0],
          endTime: val[1],
        }
        this.$emit('success', { checkTime: this.checkTime })
      }
    },
    mounted() {}
  }
</script>
<style lang="scss" scoped>
  .daily_chart_select_date {

    .top_date {
      border: 1px solid #ccc;
      margin-bottom: 20px;

      span.selected {
        border-bottom: 3px solid #0088ff;
        color: #0088ff;
        font-weight: 600;
      }
    }

    .bg_white {
      background: #fff;
    }
  }
</style>